<template>
  <div class="cascader">
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="地区"
      placeholder="请选择所在地区"
      @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
    <van-checkbox v-model="checked">复选框</van-checkbox>
    <van-datetime-picker
      v-model="currentDate"
      type="datetime"
      title="选择完整时间"
      :min-date="minDate"
      :max-date="maxDate"
      @change="timeChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      fieldValue: "",
      checked: true,
      cascaderValue: "",
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [
            {
              text: "杭州市",
              value: "330100",
              children: [{ text: "杭州市", value: "330100" }],
            },
          ],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{ text: "南京市", value: "320100" }],
        },
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    timeChange () {
      console.log(this.currentDate)
      console.log(new Date(this.currentDate).toLocaleString())
    }
  },
};
</script>

<style>
.cascader {
  margin: 10px;
}
</style>